<template>
  <!--1、基本信息-->

  <v-flex class="xs10 mx-auto">
    <v-form v-model="valid" ref="basic">
      <v-text-field label v-model="goods.id" hidden />
      <v-layout>
        <v-text-field label="货号" v-model="goods.hh" :disabled="isEdit" required />
        <v-text-field label="品名" v-model="goods.pinm" :counter="200" required />
      </v-layout>

      <v-layout wrap>
        <v-text-field label="型号" v-model="goods.xingh" :counter="20" required />
        <v-text-field label="条码" v-model="goods.tm" :counter="20" />
      </v-layout>
      <v-layout wrap>
        <v-text-field label="长(mm)" v-model="goods.chang" :counter="20" />
        <v-text-field label="宽(mm)" v-model="goods.kuan" :counter="20" />
        <v-text-field label="高(mm)" v-model="goods.gao" :counter="20" />
        <v-text-field label="重量(g)" v-model="goods.zhongl" :counter="20" />
      </v-layout>
      <v-layout wrap>
        <v-flex>
          <el-select
            style="width:100%;margin-right:10px;"
            class="item-choose"
            v-model="goods.plbm"
            placeholder="选择品类"
            filterable
          >
            <el-option
              v-for="(item,index) in pllist"
              :key="index"
              :label="item.plmc+'('+item.plbm+')'"
              :value="item.plbm"
            ></el-option>
          </el-select>
        </v-flex>
      </v-layout>

      <v-layout class="my-4" row>
        <v-spacer />
        <v-btn @click="save" color="primary">保存</v-btn>
        <v-btn @click="clear">重置</v-btn>
      </v-layout>
    </v-form>
  </v-flex>
</template>

<script>
export default {
  name: "goods-form",
  props: {
    oldGoods: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valid: false,
      goods: {
        id: "",
        zhongl: "",
        pinm: "", // 标题
        hh: "", // 子标题
        xingh: "", //
        chang: "",
        kuan: "",
        gao: "",
        plbm: "",
        plmc: ""
      },
      nameRules: [v => v.length <= 20 || "不得超过20字符"],
      dotRules: [
        v => (v.indexOf(".") < 0 && !/[^\d]/g.test(v)) || "不得输入非整数"
      ],
      pllist: []
    };
  },
  methods: {
    getDataFromServer() {
      this.$http
        .get("/item/item/pl?level=3")
        .then(resp => {
          console.log(resp);
          this.pllist = resp.data;
        })
        .catch(e => (this.pllist = []));
    },
    save() {
      // 表单校验。
      // 先处理goods，用结构表达式接收,除了categories外，都接收到goodsParams中
      const { ...goodsParams } = this.goods;
      // 处理规格参数
      const specs = {};

      this.$http({
        method: "post",
        url: this.isEdit ? "item/item/modify" : "item/item/insert",
        data: goodsParams
      })
        .then(() => {
          // 成功，关闭窗口
          this.$emit("close");
          // 提示成功
          this.$message.success("保存成功了");
        })
        .catch(() => {
          this.$message.error("保存失败！");
        });
    },
    clear() {
      // 重置表单
      this.$refs.basic.reset();
    },
    check_num: function() {
      var license_num = this.goods.zhongl;
      license_num = license_num.replace(/[^\d]/g, ""); // 清除“数字”和“.”以外的字符
      if (license_num.indexOf(".") < 0 && license_num != "") {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        license_num = parseInt(license_num);
      }
      this.license_num = license_num;
    }
  },
  watch: {
    oldGoods: {
      deep: true,
      handler(val) {
        if (!this.isEdit) {
          Object.assign(this.goods, {
            pinm: "", //
            hh: "", //
            tm: "",
            xingh: "", //
            chang: "", //
            gao: "",
            zhongl: "",
            kuan: "",
            plbm: "",
            plmc: ""
          });
        } else {
          this.goods = Object.deepCopy(val);
        }
        this.getDataFromServer();
      }
    }
  },
  computed: {
    headers() {
      const headers = [];
      Object.keys(this.hhs[0]).forEach(k => {
        let value = k;
        if (k === "price") {
          // enable，表头要翻译成“价格”
          k = "价格";
        } else if (k === "stock") {
          // enable，表头要翻译成“库存”
          k = "库存";
        } else if (k === "enable") {
          // enable，表头要翻译成“是否启用”
          k = "是否启用";
        } else if (k === "images" || k === "indexes") {
          // 图片和索引不在表格中展示
          return;
        }
        headers.push({
          text: k,
          align: "center",
          sortable: false,
          value
        });
      });
      return headers;
    }
  }
};
</script>

<style scoped>
</style>
